<template>
  <div>
    <Search></Search>
    <!-- <GoodsListNav></GoodsListNav> -->
    <div class="goods-list-container">
      <!-- {{cartlist}} -->
      <!-- {{count}}{{bookid}} -->
      <!-- 提示信息 -->
      {{this.selectcart}}
      <Alert show-icon class="tips-box">
        小提示
        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
        <template slot="desc">请点击商品前的选择框，选择购物车中的商品，点击付款即可。</template>
      </Alert>

      <Table :columns="columns" :data="shopcartlist">
        <template slot-scope="{ row }" slot="bookImg">
          <div class="pic">
            <img :src="row.bookImg" alt width="100%" height="100%" />
          </div>
          <!-- <pic-zoom :url="row.bookImg" :scale="3" :scroll="true"></pic-zoom> -->
        </template>
        <template slot="count">
          {{count}}
          <!-- <pic-zoom :url="row.bookImg" :scale="3" :scroll="true"></pic-zoom> -->
        </template>
        <template slot="sum">
          {{count*singleprice}}
          <!-- <pic-zoom :url="row.bookImg" :scale="3" :scroll="true"></pic-zoom> -->
        </template>
      </Table>
      <!-- 这里会先渲染购物车的信息 -->

      <!-- 收货人信息 -->
      <div class="address-container">
        <h3>收货人信息</h3>
        <div class="address-box">
          <div class="address-check">
            <div class="address-check-name">
              <span>
                <Icon type="ios-checkmark-outline"></Icon>
                {{checkAddress.name}}
              </span>
            </div>
            <div class="address-detail">
              <p>{{checkAddress.address}}</p>
            </div>
          </div>
          <!-- 选择地址的面板，先获取地址信息 -->
          <Collapse>
            <Panel>
              选择地址
              <p slot="content">
                <RadioGroup vertical size="large" @on-change="changeAddress">
                  <Radio :label="item.id" v-for="(item, index) in address" :key="index">
                    <span>{{item.recename}} {{item.address}} {{item.mobile}}</span>
                  </Radio>
                </RadioGroup>
              </p>
            </Panel>
          </Collapse>
        </div>
      </div>
      <div class="remarks-container">
        <h3>备注</h3>
        <i-input v-model="remarks" size="large" placeholder="在这里填写备注信息" class="remarks-input"></i-input>
      </div>
      <div class="invoices-container">
        <h3>发票信息{{this.$store.state.userid}}</h3>
        <p>该商品不支持开发票</p>
      </div>
      <div class="pay-container">
        <div class="pay-box">
          <p>
            <span>提交订单应付总额：</span>
            <span class="money">
              <Icon type="social-yen"></Icon>
              {{count*singleprice}}
            </span>
          </p>
          <div class="pay-btn">
            <router-link to="/pay">
              <Button type="error" size="large" @click="Pay">支付订单</Button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Search";
// import GoodsListNav from '@/components/nav/GoodsListNav';
export default {
  name: "Order",
  beforeRouteEnter(to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      singleprice: "",
      bookid: this.$route.query.bookid,
      count: this.$route.query.count,
      selectcart:[],
      shopcartlist: [],
      queryInfo: {
        query: window.sessionStorage.userid
      },
      order_pay:1,
      // 订单是否发货0代表未发货，1代表已发货
      order_status: 0,
      // 订单编号
      ordernumber: "",
      // 用户id,商品数量
      CartInfo: {
        bookid: this.$route.query.bookid,
        count: this.$route.query.count,
        userid: window.sessionStorage.userid
      },
      address: [],
      goodsCheckList: [],
      columns: [
        {
          title: "商品图",
          // sortable: true,
          align: "center",
          resizable: true,
          width: 170,
          height: 150,
          slot: "bookImg"
        },
        {
          title: "书名",
          key: "bookname"
        },
        {
          title: "单价",
          key: "price"
        },
        {
          title: "数量",
          slot: "count"
        },
        {
          title: "总价",
          slot: "sum"
        }
      ],
      checkAddress: {
        name: "未选择",
        readdress: "请选择地址",
        mobile: ""
      },
      remarks: ""
    };
  },
  mounted(){
    
  },
  computed: {
    totalPrice() {
      let price = 0;
      this.goodsCheckList.forEach(item => {
        price += item.price * item.count;
      });
      return price;
    }
  },
  methods: {
    select(selection, row) {
      console.log(row);
      this.goodsCheckList = selection;
      console.log(this.goodsCheckList);
    },
    //改变Radio会触发
    changeAddress(data) {
      console.log(data);
      const father = this;
      this.address.forEach(item => {
        if (item.id === data) {
          father.checkAddress.name = item.recename;
          father.checkAddress.address = `${item.recename} ${item.address} ${item.mobile} `;
          father.checkAddress.readdress = item.address;
          father.checkAddress.mobile = item.mobile;
        }
      });
    },
    async getAddress() {
      const { data: res } = await this.$axios.get("address", {
        params: this.queryInfo
      });
      console.log(res.data);
      this.address = res.data;
    },
    async getCartBook() {
      const { data: res } = await this.$axios.get(
        "http://localhost:8080/api/admin/goodList/buy",
        {
          params: this.CartInfo
        }
      );
      console.log(res.data[0].price);
      this.shopcartlist = res.data;
      this.singleprice = res.data[0].price;
    },
    async Pay() {
      //自定义订单编号生成规则   由YYYYMMDD(年月日) + 时间戳的格式组成
      let currDate = new Date();
      let year = currDate.getFullYear();
      let month =
        currDate.getMonth() + 1 < 10
          ? "0" + (currDate.getMonth() + 1)
          : currDate.getMonth() + 1;
      let day =
        currDate.getDate() < 10 ? "0" + currDate.getDate() : currDate.getDate();

      //获取年月日
      let date = year + month + day; //20190524

      //获取当时时间戳
      let timestamp = Date.parse(currDate); //155866554500

      //生成订单
      let ordernumber = date + timestamp; //20190524155866554500
      this.ordernumber = ordernumber;
      console.log(this.ordernumber);
      const { data: res } = await this.$axios.post(
        "http://localhost:8080/api/admin/orderList/pay",
        {
          list: this.shopcartlist,
          params: this.CartInfo,
          recevice: this.checkAddress,
          ordernumber: this.ordernumber,
          order_status: this.order_status,
          remarks:this.remarks,
          order_pay: this.order_pay,
        }
      );
    },
     test(){
       console.log(this.$route.query.params)
      //  var se = JSON.stringify(this.$route.query.params);
      // console.log(typeof se)
      this.selectcart=this.$route.query.params
    }
  },
  created() {
    this.getAddress();
    this.getCartBook();
    this.test()
  },
  components: {
    Search
    // GoodsListNav
  }
};
</script>

<style scoped>
.goods-list-container {
  margin: 15px auto;
  width: 80%;
}
.tips-box {
  margin-bottom: 15px;
}
.address-container {
  margin-top: 15px;
}
.address-box {
  margin-top: 15px;
  padding: 15px;
  border: 1px #ccc dotted;
}
.address-check {
  margin: 15px 0px;
  height: 36px;
  display: flex;
  align-items: center;
}
.address-check-name {
  width: 120px;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: #ccc;
}
.address-check-name span {
  width: 120px;
  height: 36px;
  font-size: 14px;
  line-height: 36px;
  text-align: center;
  color: #fff;
  background-color: #f90013;
}
.address-detail {
  padding-left: 15px;
  font-size: 14px;
  color: #999999;
}
.remarks-container {
  margin: 15px 0px;
}
.remarks-input {
  margin-top: 15px;
}
.invoices-container p {
  font-size: 12px;
  line-height: 30px;
  color: #999;
}
.pay-container {
  margin: 15px;
  display: flex;
  justify-content: flex-end;
}
.pay-box {
  font-size: 18px;
  font-weight: bolder;
  color: #495060;
}
.money {
  font-size: 26px;
  color: #f90013;
}
.pay-btn {
  margin: 15px 0px;
  display: flex;
  justify-content: flex-end;
}
.pic {
  margin: 5px auto;
  width: 100px;
  height: 100px;
}
</style>
